<template>
  <van-notify v-model:show="show" type="success">
    <van-icon style="margin-right: 4px" />
    <span>打招呼成功!请耐心等待{{ name }}的回应...</span>
  </van-notify>
  <user-card-list
    :user-list="userList"
    :show-tag="true"
    :loading="loading"
    isGetUser="1"
    isDetail="1"
    @showNotify="showNotify"
  />
  <van-button block type="primary" @click="teamChat">队伍聊天</van-button>
  <van-button
    class="add-button"
    type="primary"
    icon="exchange"
    @click="showCenter = true"
  />
  <van-popup
    v-model:show="showCenter"
    round
    style="height: 60%"
    :style="{ padding: '20px' }"
  >
    <van-steps
      v-for="sysMessage in sysMsgForTeam"
      direction="vertical"
      active="1"
    >
      <van-step
        :class="
          sysMessage.type == 0
            ? 'teamCreate'
            : sysMessage.type == 1
            ? 'teamDisband'
            : sysMessage.type == 2
            ? 'teamJoin'
            : sysMessage.type == 3
            ? 'teamQuit'
            : 'teamExpire'
        "
      >
        <h3>{{ sysMessage.text }}</h3>
        <p>{{ moment(Number(sysMessage.createTime)).format("MM-DD HH:mm") }}</p>
      </van-step>
    </van-steps>
  </van-popup>
  <van-empty
    v-if="!userList || userList.length < 1"
    description="这里面没有人啦"
  />
</template>

<script setup lang="ts">
import moment from "moment";
import myAxios from "../plugins/myAxios";
import UserCardList from "../components/UserCardList.vue";
import { showFailToast } from "vant";
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { TeamType } from "../models/team";
import { ChatType } from "../models/chat";

const show = ref(false); //展示消息通知
const name = ref(""); //反馈打招呼对象的昵称
//展示打招呼的反馈信息，由子组件触发
const showNotify = (showNot: boolean, username: string) => {
  show.value = showNot;
  name.value = username;
  setTimeout(() => {
    show.value = false;
  }, 2500);
};

/**
 * 去队伍聊天室
 */
const router = useRouter();
const isTeamMember = ref(false);
const teamChat = () => {
  if (!isTeamMember.value) {
    showFailToast("小智遗憾告知:只有队伍成员才能参与聊天");
    return;
  }
  router.push({
    path: "/chat",
    query: {
      teamId,
      teamName,
      scope: 2,
    },
  });
};

/**
 * 展示队伍相关信息
 */
const sysStstusMap = new Map(); //队伍信息和id的映射
const sysMsgForTeam = ref([] as ChatType[]); //队伍有关的系统消息内容
const showCenter = ref(false); //展示队伍相关信息的弹出层
const createrId = ref(0);
const getSysMsgForTeam = async () => {
  const res = await myAxios.get("/chat/chatList", {
    params: {
      userId: createrId.value,
      scope: 3,
    },
  });
  if (res.code === 0 && res.data) {
    res.data.forEach((r) => {
      const teamId = r.teamId;
      if (teamId) {
        const arr = sysStstusMap.get(teamId);
        if (arr) {
          arr.push(r);
        } else {
          sysStstusMap.set(r.teamId, [r]);
        }
      }
    });
    for (const key of sysStstusMap.keys()) {
      sysMsgForTeam.value = sysStstusMap.get(key).sort((a, b) => {
        return a.createTime - b.createTime;
      });
    }
  }
};

const route = useRoute();
const teamId = Number(route.query.teamId);
const teamName = route.query.teamName;
const userId = Number(route.query.userId);
const myFriendIdList = ref([]); //所有好友的id列表
const userList = ref([]); //展示用户
const loading = ref(false); //是否处于加载状态
onMounted(async () => {
  await myAxios
    .get("/user/myFriendId", {
      params: {
        userId,
      },
    })
    .then((res) => {
      if (res.code === 0 && res.data) {
        myFriendIdList.value = res.data;
      }
    });
  const res = await myAxios.get("/userTeam/detail", {
    params: {
      teamId,
    },
  });
  if (res.code === 0) {
    res.data.forEach((teamUser: TeamType) => {
      const creater = teamUser.createUser;
      if (creater) {
        createrId.value = creater.id;
        if (creater.id === userId) isTeamMember.value = true;
        if (myFriendIdList.value.find((id) => id === creater.id)) {
          teamUser.createUser.isMyFriend = true;
        }
        creater.tags = JSON.parse(creater.tags);
        userList.value.push(creater);
      } else {
        if (myFriendIdList.value.find((id) => id === teamUser.userId)) {
          teamUser.user.isMyFriend = true;
        }
        if (teamUser.user.id === userId) isTeamMember.value = true;
        teamUser.user.tags = JSON.parse(teamUser.user.tags);
        userList.value.push(teamUser.user);
      }
    });
    getSysMsgForTeam();
  } else {
    showFailToast("小智遗憾告知:成员列表加载失败");
  }
});
</script>

<style scoped>
@import "../assets/css/teamDetail.css";
@import "../assets/css/public.css";
</style>
